<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">

<head th:replace="~{common/head :: head}">
</head>

<body>
<!--  Body Wrapper -->
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
     data-sidebar-position="fixed" data-header-position="fixed">
    <!-- Sidebar Start -->
    <aside th:replace="~{common/left-sidebar :: left-sidebar}"></aside>
    <!--  Sidebar End -->

    <!--  Main wrapper -->
    <div class="body-wrapper">
        <!--  Header Start -->
        <header th:replace="~{common/app-header :: app-header}"></header>
        <!--  Header End -->

        <div class="card" style="max-width: 92%;padding-top: 72px;margin-left: 3%">
            <div style="border-top:2px solid #CCC;margin: 0.5pc 0pc;"></div>
            <div class="row">
                <div class="col-md-4">
                    <!--  Row 1 -->
                    <div class="row" style="margin: 0.5pc;">
                        <form th:action="@{/search}" th:object="${user}" method="post">
                            <div class="row clearfix ">
                                <label for="exampleFormControlInput1" class="form-label">用户关键字：</label>
                                <div class="col-md-9 mb-3">
                                    <input type="text" class="form-control" id="exampleFormControlInput1"
                                           placeholder="终端编号，机手姓名，机手电话，整机编号……" th:field="*{userName}">
                                </div>
                                <div class="col-md-3 mb-3">
                                    <button class="btn btn-primary" type="submit"> 检索用户</button>
                                </div>
                            </div>
                        </form>
                        <form th:action="@{/problem/doAddQuickly}" th:object="${problem}" method="post">
                            <div class="row clearfix ">
                                <div class="col-md-6 mb-3">
                                    <label for="exampleFormControlInput1" class="form-label">问题分类：</label>
                                    <select class="form-select" aria-label="Default select example" name="type">
                                        <option th:value="'有轨迹，无作业记录'" th:field="*{type}" selected>有轨迹，无作业记录</option>
                                        <option th:value="'用户更换手机号'" th:field="*{type}">用户更换手机号</option>
                                        <option th:value="'有亩数，结果较小'" th:field="*{type}">有亩数，结果较小</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="exampleFormControlInput1" class="form-label">终端编号：</label>
                                    <input type="text" class="form-control" th:value="*{imei}" th:field="*{imei}">
                                </div>
                                <div class="mb-3">
                                    <label for="exampleFormControlTextarea1" class="form-label">问题详情描述：</label>
                                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                                              placeholder="微信群中用户提问的问题描述……"
                                              th:field="*{problemLog}"></textarea>
                                </div>
                                <div class="mb-3">
                                    <button class="btn btn-primary">提交日常问题</button>
                                </div>
                            </div>
                        </form>


                    </div>
                    <div class="row">
                        <div class="col-lg-12 d-flex align-items-stretch">
                            <div class="card w-100">
                                <div class="card-body p-4">
                                    <div class="mb-4">
                                        <h5 class="card-title fw-semibold">问题时间轴：
                                            <a th:href="@{/problem/list}"
                                               style="float:right;color: #4a5363">更多详情>></a>
                                        </h5>
                                    </div>
                                    <ul class="timeline-widget mb-0 position-relative mb-n5">
                                        <li class="timeline-item d-flex position-relative overflow-hidden"
                                            th:each="problem,status:${problemList}">
                                            <div class="timeline-time text-dark flex-shrink-0 text-end">
                                                <span th:text="${problem.owner}">用户名</span>
                                                <p>
                                                    <a th:href="@{/}" th:text="${problem.imei}">8655475221</a>
                                                </p>
                                            </div>
                                            <div class="timeline-badge-wrap d-flex flex-column align-items-center">
                                                <span class="timeline-badge border-2 border flex-shrink-0 my-8"
                                                      th:classappend="${problem.status==0?'border-primary ':(problem.status==1?'border-warning':(problem.status==2?'border-success':'border-danger'))}"></span>
                                                <span th:classappend="${status.count!=6?'timeline-badge-border d-block flex-shrink-0':''}"></span>
                                            </div>
                                            <div class="timeline-desc fs-3 text-dark mt-n1">
                                                <p th:text="${problem.problemLog}"></p>
                                            </div>

                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-8 align-items-stretch box">
                    <div class="row">
                        <div class="col-md-3" th:each="box:${boxList}">
                            <a th:href="@{${box.superlink}}" target="_blank" class="sm-li">
                                <div class="col-md-3" style="padding: 0px 4px;">
                                    <img th:src="@{${box.boxImg}}" class="sm-img">
                                </div>
                                <div class="sm-text col-md-9">
                                    <h5 class="sm-name" th:text="${box.boxName}">名称</h5>
                                    <p class="text-truncate sm-url" th:text="${box.remark}">
                                        www.xliee.com</p>
                                </div>
                            </a>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row">
                <br>
            </div>

        </div>

    </div>
</div>

</body>

</html>